<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03_模板解析_表达式_vue</title>
</head>
<body>
  <!-- 
    1.模板解析的关键对象: compile对象
    2.模板解析的基本流程:
      1). 将el的所有子节点取出, 添加到一个新建的文档fragment对象中
      2). 对fragment中的所有层次子节点递归进行编译解析处理
          * 对插值文本节点进行解析
          * 对元素节点的指令属性进行解析
              * 事件指令解析
              * 一般指令解析
        3). 将解析后的fragment添加到el中显示
    3.解析插值文本节点
        1). 根据正则对象得到匹配出的表达式字符串: 子匹配/RegExp.$1
        2). 从data中取出表达式对应的属性值
        3). 将属性值设置为文本节点的textContent

        textNode.textContent = value
    看源码 => 理解源码的实现逻辑原理  ==> 比较困难的
    分析原理 => 需要知道/能说清楚实现的关键操作都怎么做的/做了什么

    先告诉大家结果(原理性的) => 看一下代码的基本实现和关键代码
  -->

  <div id="test">
    <p>{{name}}</p>  <!-- textNode.textContent = value -->
  </div>

  <script src="./js/mvvm/compile.js"></script>
  <script src="./js/mvvm/mvvm.js"></script>
  <script src="./js/mvvm/observer.js"></script>
  <script src="./js/mvvm/watcher.js"></script>
  <script>
    new MVVM({
      el: '#test',
      data: {
        name: 'Tom'
      }
    })
  </script>

</body>
</html>